<template>
	<div>
    <div class="wrapper background">
      <div :style="{ height: statusBarHeight }"></div>
      <div class="nav" :style="{ height: navBarHeight }">
        <text class="iconfont"
              :style="{ height: navBarHeight, lineHeight: navBarHeight }"
              @click="goBack">{{'\ue689'}}</text>
        <div class="nav" @click="selectCity">
          <text class="city">{{location}}</text>
          <text class="tab">{{'\ue607'}}</text>
        </div>
        <text class="iconfont"></text>
      </div>
      <scroller class="wrapper">
        <text class="city date-week">{{month}}月{{date}}日   周{{day}}</text>
        <text class="city date-week temperature">{{tmp}}°</text>
        <div class="nav items-padding">
          <div class="nav">
            <text class="city">{{cond_txt}} </text>
            <image class="now-conditions" :src="cond_code | formatCond"></image>
          </div>
          <div class="nav air-wrapper">
            <text class="air-icon" :style="{ color: apiColor }">{{'\ue659'}}</text>
            <text class="air-text">{{aqi}}</text>
            <text class="air-text">{{qlty}}</text>
          </div>
        </div>
        <div class="nav items-padding">
          <div class="nav">
            <div class="nav">
              <text class="temp-icon">{{'\ue612'}}</text>
              <text class="temp-text">{{tmp_min}}° </text>
            </div>
            <div class="nav">
              <text class="temp-icon">{{'\ue60f'}}</text>
              <text class="temp-text">{{tmp_max}}°</text>
            </div>
          </div>
          <div class="nav">
            <div class="nav">
              <text class="other-icon">{{'\ue64f'}}</text>
              <div class="other-text-wrapper">
                <text class="other-text">{{wind_dir}}    </text>
                <text class="other-text">{{wind_sc}}级    </text>
              </div>
            </div>
            <div class="nav">
              <text class="temp-icon">{{'\ue672'}} </text>
              <div class="other-text-wrapper">
                <text class="other-text">湿度</text>
                <text class="other-text">{{hum}}%</text>
              </div>
            </div>
          </div>
        </div>
        <div class="temp-list-wrapper">
          <div class="temp-list-item" 
               v-for="(value, index) in forecast" 
               :key="'temp' + index"
               :class="[index === forecast.length - 1 ? 'noBorder' : '']">
            <text class="list-item-margin item-font">{{value.week}}</text>
            <text class="list-item-margin item-font">{{value.month}}/{{value.date}}</text>
            <text class="list-item-margin item-font">{{value.cond_txt_d}}</text>
            <image class="list-item-margin item-image" :src="value.cond_code_d | formatCond"></image>
            <text class="list-item-margin item-font">{{value.tmp_max}}°</text>
            <image class="item-image-area" src="bmlocal://assets/weather/temp-area.png" ></image>
            <text class="list-item-margin item-font">{{value.tmp_min}}°</text>
            <image class="list-item-margin item-image" :src="value.cond_code_n | formatCond"></image>
            <text class="list-item-margin item-font">{{value.cond_txt_n}}</text>
          </div>
        </div>
      </scroller>
    </div>
	</div>
</template>
<script>
  import { addIconFontSupport } from '@/config/iconConfig'
  import ajax from '@/net/weather'
  import { getCache } from '@/util/storageUtils'
  import { CTCE_USER_INFO } from '@/config/storageTypes'
  const dom = weex.requireModule('dom')
  const eros = weex.config.eros

	export default {
    name: 'weather',
    data () {
      return {
        statusBarHeight: 0,
        navBarHeight: eros.navBarHeight,
        location: null,
        month: null,
        date: null,
        day: null,
        tmp: null,
        cond_txt: null,
        cond_code: null,
        wind_dir: null,
        wind_sc: null,
        hum: null,
        aqi: null,
        qlty: null,
        apiColor: null,
        forecast: [],
        divisionDataG: null,
        quyxzqhdm: null,
        XZQHDM: []
      }
    },
    beforeCreate () {
      this.$notice.loading.show()
      addIconFontSupport(dom, "../../")
    },
    created () {
      this.initStatusBar()
      getCache(CTCE_USER_INFO).then(res => {
        const adcd = JSON.parse(res).xzqhdm
        const adcdStr = this.formatAdcd(adcd)
        this.loadData(adcdStr)
      })
      this.loadData()
    },
    methods: {
      initStatusBar () {
        if (WXEnvironment.platform === 'android' && parseFloat(eros.sysVersion) < 4.4) {
          this.statusBarHeight = 0
        } else {
          this.statusBarHeight = eros.statusBarHeight
        }
      },
      goBack () {
        this.$router.back()
      },
      loadData (adcdStr) {
        this.$notice.loading.show()
        ajax.getWeatherNow(adcdStr).then(res => {
          const data = res.HeWeather6[0]
          const now = data.now
          const time = new Date()
          const weekArr = ['日', '一', '二', '三', '四', '五', '六']
          this.location = data.basic.location
          this.month = time.getMonth() + 1
          this.date = time.getDate()
          this.day = weekArr[time.getDay()]
          this.tmp = now.tmp
          this.cond_txt = now.cond_txt 
          this.cond_code = now.cond_code
          this.wind_dir = now.wind_dir
          this.wind_sc = now.wind_sc
          this.hum = now.hum
        })
        ajax.getAirNow(adcdStr).then(res => {
          const data = res.HeWeather6[0].air_now_city
          this.aqi = data.aqi
          this.qlty = data.qlty
          this.apiColor = this.formatApiColor(this.aqi)
        })
        ajax.getWeatherForecast(adcdStr).then(res => {
          const data = res.HeWeather6[0].daily_forecast
          const weekArr = ['日', '一', '二', '三', '四', '五', '六']
          data.forEach((value, index) => {
            let date = new Date(value.date)
            if (index === 0) {
              value.week = '今天'
            } else if (index === 1) {
              value.week = '明天'
            } else if (index === 2) {
              value.week = '后天'
            } else {
              value.week = '周' + weekArr[date.getDay()]
            }
            value.month = date.getMonth() + 1
            value.date = date.getDate()
          })
          this.forecast = data
          this.$nextTick(() => {
            this.$notice.loading.hide()
          })
        })
      },
      formatAdcd (id) {
        if (!id) return
        let str = ''
        if (id === '86') {
          str = '110000'
        } else if (id.length === 2) {
          str = id + '0000'
        } else {
          str = id.substring(0, 6)
        }
        return str
      },
      formatApiColor (num) {
        let str = ''
        num = parseInt(num)
        if (num >= 0 && num <= 50) {
          str = '#40c057'
        } else if (num > 50 && num <= 100) {
          str = '#82c91e'
        } else if (num > 100 && num <= 150) {
          str = '#f76707'
        } else if (num > 150 && num <= 200) {
          str = '#e03131'
        } else if (num > 200 && num <= 300) {
          str = '#841c3c'
        } else if (num > 300) {
          str = '#540822'
        }
        return str
      },
      selectCity () {
        let params = null
        if (this.quyxzqhdm) {
          params = {
            name: 'weather',
            data: this.divisionDataG,
            dm: this.quyxzqhdm,
            XZQHDM: this.XZQHDM
          }
        } else {
          params = {
            name: 'weather'
          }
        }
        this.$router.open({
          name: 'divisionG',
          params,
          navTitle: '请选择'
        })
      }
    },
    filters: {
      formatCond (value) {
        return value ? `bmlocal://assets/weather/${value}.png` : ''
      }
    },
    computed: {
      tmp_min () {
        if (this.forecast.length !== 0) {
          return this.forecast[0].tmp_min
        } else {
          return null
        }
      },
      tmp_max () {
        if (this.forecast.length !== 0) {
          return this.forecast[0].tmp_max
        } else {
          return null
        }
      }
    },
    eros: {
      beforeBackAppear (params) {
        if (params.name === 'weather') {
          this.divisionDataG = params.data.join(' ')
          this.quyxzqhdm = params.xzqhdm
          this.XZQHDM = params.XZQHDM
          if (!params.xzqhdm) params.xzqhdm = '86'
          const adcdStr = this.formatAdcd(params.xzqhdm)
          this.loadData(adcdStr)
        }
      }
    }
	}
</script>
<style lang="scss" scoped>
  @mixin font ($size) {
    color: white;
    font-size: $size;
  }

  @mixin iconfont ($size) {
    color: white;
    font-size: $size;
    font-family: wxcIconFont;
  }

  .wrapper {
    flex: 1;
  }
  .background {
    background-image: linear-gradient(to bottom,#6F86D6,#48C6EF)
  }
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .iconfont {
    font-family: wxcIconFont;
    width: 80px;
    text-align: center;
    font-size: 33px;
    color: white;
  }
  .city {
    font-family: wxcIconFont;
    font-size: 42px;
    color: white;
  }
  .tab {
    font-family: wxcIconFont;
    font-size: 28px;
    color: white;
    padding-left: 10px;
  }
  .date-week {
    text-align: center;
    padding: 20px 0;
  }
  .temperature {
    font-size: 133px;
  }
  .items-padding {
    padding: 20px 41.7px;
  }
  .now-conditions {
    width: 83.3px;
    height: 83.3px;
  }
  .air-wrapper {
    width: 168.75px;
    height: 62.5px;
    background-color: rgba(255,255,255,0.6);
    border-radius: 4.2px;
    justify-content: space-around;
  }
  .air-icon {
    font-family: wxcIconFont;
    font-size: 36px;
    color: #FED950;
    transform: rotate(90deg)
  }
  .air-text {
    font-size: 29px;
    color: white;
  }
  .temp-icon {
    @include iconfont(36px);
  }
  .temp-text {
    @include font(42px);
  }
  .other-icon {
    @include iconfont(60px);
  }
  .other-text-wrapper {
    align-items: center;
  }
  .other-text {
    @include font(29px);
  }
  .temp-list-wrapper {
    background-color: rgba(255,255,255,0.2);
    flex-direction: row;
    width: 666.6px;
    margin: 20px 41.7px 0;
  }
  .temp-list-item {
    padding: 30px 0;
    flex: 1;
    align-items: center;
    border-right-color: rgba(238,238,238,0.2);
    border-right-style: solid;
    border-right-width: 1px;
  }
  .noBorder {
    border-right-width: 0;
  }
  .list-item-margin {
    margin: 10.4px 0;
  }
  .item-font {
    @include font(25px);
  }
  .item-image {
    width: 62.5px;
    height: 62.5px;
  }
  .item-image-area {
    width: 20.8px;
    height: 62.5px;
  }
</style>